<template>
    <div class="main" :style="{ backgroundColor: dark ? '#121212' : '#ffffff' }">
        <div class="fn">
            <el-space wrap :size="100">
                <div style="cursor: pointer;" @click="changeColor">
                    <el-icon v-if="dark" :size="40" color="#ffffff">
                        <Moon />
                    </el-icon>
                    <el-icon v-else :size="40" color="#000000">
                        <Sunny />
                    </el-icon>
                </div>
                <div>
                    <el-space wrap>
                        <span class="colorbox" v-for="(item, index) in color" :key="index"
                            :style="{ backgroundColor: item.value }" @click="changeText(item.value)"></span>
                    </el-space>
                </div>
            </el-space>
        </div>

        <div style="display: flex; align-items: center; justify-content: center; margin: 100px auto;">
            <p class="text" :style="{ color: textColor }"> 暗黑模式 丰富主题</p>
        </div>
    </div>
</template>

<script setup lang="ts">

import { ref } from 'vue';

const textColor = ref('#000000')

const dark = ref(false)

const changeColor = () => {
    dark.value = !dark.value

    if (textColor.value === '#000000' || textColor.value === '#ffffff') {
        if (dark.value) {
            textColor.value = '#ffffff'
        } else {
            textColor.value = '#000000'
        }
    }

}

const changeText = (value) => {
    textColor.value = value
}

const color = [
    {
        value: '#f5222d'
    },
    {
        value: '#fa541c'
    },
    {
        value: '#fa8c16'
    },
    {
        value: '#faad14'
    },
    {
        value: '#fadb14'
    },
    {
        value: '#a0d911'
    },
    {
        value: '#52c41a'
    },
    {
        value: '#13c2c2'
    },
    {
        value: '#1677ff'
    },
    {
        value: '#2f54eb'
    },
    {
        value: '#722ed1'
    },
    {
        value: '#eb2f96'
    }
]

</script>

<style scoped lang="scss">
.main {
    height: 100%;
    padding: 0 20px;

    .text {
        font-size: 50px;
        font-weight: bold;
    }

    .fn {
        padding: 20px 0;
        letter-spacing: 2px;
        display: flex;

        .colorbox {
            width: 30px;
            height: 30px;
            cursor: pointer;
            border-radius: 50%;
        }
    }
}
</style>